<template>
  <div class="post">
    <h3>{{ post.title }}</h3>

    <div class="back">
      <router-link to="/index">
        返回列表
      </router-link>
    </div>

    <p class="author">
      <span>作者:{{ post.author.name }}</span>
      <span>日期:{{ post.pubDate }}</span>
    </p>
    <p>{{ post.content }}</p>

  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    name: 'VPost',
    data(){
      return {
        post: {
          postId: this.$route.params.id,
          title: '',
          content: '',
          author: '',
          pubDate: ''
        }
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.loadPost();
      })
    },
    methods: {
      loadPost(){
        this.$$get(`/post/${this.$route.params.id}`)
          .then((res) => {
            if (res.data.code === 1)
              this.post = res.data.data;
            else
              alert(res.data.msg);
          })
          .catch((err) => {
            //无需处理
          })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .post {
    position relative
    width 960px
    margin auto
    text-align center

    .back {
      position absolute
      top 30px
      left 100px
    }

    .author {
      margin 20px
      font-size .8em
      color #666
    }

  }
</style>
